<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" href="favicon.ico" mce_href="favicon.ico" type="image/x-icon">
    　　
    <link rel="shortcut icon" href="favicon.ico" mce_href="favicon.ico" type="image/x-icon">
    <title>canvas</title>
    <style>
        * {
            user-select: none;
            overflow: hidden;
        }

        span,
        button {
            color: rgb(177, 146, 86)
        }

        button {
            border: none;
            font-size: 14px;
            cursor: pointer;
            margin: 5px;
        }

        body,
        input {
            background-color: rgb(236, 225, 215);
            color: rgb(177, 146, 86);
            font-family: arial, helvetica, sans-serif;
            text-align: center;
            margin: 0;
            padding: 0;
        }

        #canvas {
            border: 0.5px solid #c5c0ba;
            padding: 5px ;
        }

        h1 {
            margin-top: 0;
            letter-spacing: 0.3em;
        }
    </style>
</head>

<body>
    <h1>闲D一笔</h1>
    <div style="margin: 6px 0;    position: absolute;
    top: 0px;
    right: 10px;
    font-size: 5px;">
        @闲 无聊画着玩
    </div>
    <div><canvas id="canvas"></canvas></div>
    <button id="Imagesave">保存图片</button>
    <button onclick="clearCanvas()">再画一个</button>
    <span>颜色：</span>
    <input type="color" onchange="handleChangeColor()" id="LineColor" value="#290505">
    <span>宽度：</span>
    <input id="lineWidth" type="number" oninput="handleInput()" min="1" value=4 max="10" contenteditable="true" />
    <button onclick="addInput()">加</button>
    <button onclick="jianInput()">减</button>

    <script>
        function getSvgUrl(skoreColor) {
            if (svgurl) {
                URL.revokeObjectURL(svgurl);
                svgurl = undefined;
            }
            let svgdata = `<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1562984511074" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2338" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M826.515 665.154l-184.178 172.76 46.976 47.079A125.766 125.766 0 0 0 778.417 922a125.784 125.784 0 0 0 89.107-37.007c49.22-49.415 49.22-129.327 0-178.742l-41.01-41.097z m-57.923-58.048L379.187 216.863 200.975 395.6l384.734 385.565 182.883-174.059zM120.775 171.664l35.68 179.353 178.277-178.808-178.637-35.813c-16.245-3.257-32.055 7.272-35.312 23.517a30 30 0 0 0-0.008 11.75z" fill="${skoreColor}" p-id="2339"></path></svg>`
            const file = new Blob([svgdata], { type: "image/svg+xml" })
            svgurl = URL.createObjectURL(file);
            canvas.style.cursor = `url('${svgurl}'),auto`;
        }
        /**
         * @params {e} window.event 
         * 颜色选择器
         **/
        function handleChangeColor(e) {
            const event = e || window.event;
            ctx.strokeStyle = event.target.value;
            getSvgUrl(event.target.value);
        }
        /**
         * 
         *加粗画笔线条
        */
        function addInput() {
            const target = document.getElementById("lineWidth");
            target.value = ++target.value;
            ctx.lineWidth = target.value = target.value > 10 ? 10 : target.value
        }
        /**
         * 画笔变细
        */
        function jianInput() {
            const target = document.getElementById("lineWidth");
            target.value = --target.value;
            ctx.lineWidth = target.value = target.value < 1 ? 1 : target.value;
        }
        /**
         * @params {e} window.event
         * 根据event获取画布坐标
        */
        function getPoint(e) {
            if (e.offsetX || e.layerX) {
                const x = e.offsetX == undefined ? e.layerX : e.offsetX;
                const y = e.offsetY == undefined ? e.layerY : e.offsetY;
                return { x, y }
            }
        }
        function getPointTouch(e){
            let touch = event.touches[0];
            const x = touch.clientX;
            const y = touch.clientY;
            return { x, y }
        }
        /**
         * 保存图片
        */
        function saveImage() {
            const img = canvas.toDataURL("image/png");
            const a = document.createElement("a");
            a.href = img;
            a.download = "aaa.png"
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            console.clear();
            console.log("love what I love")
        }
        /**
         * 清除画布
        */
        function clearCanvas() {
            canvas.width = canvas.width;
            ImageStatus = false;
            canvasInit(ctx);
        }
        /**
         * 输入切换画笔宽度
        */
        function handleInput(e) {
            const event = e || window.event;
            let value = event.target.value;
            if (value > 10 || value < 1 || !parseInt(value)) {
                event.target.value = value = 4;
            }
            ctx.lineWidth = value;
        }
        /**
         * 初始化变量
        */
        let start, ImageStatus, svgurl;
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");
        function resize() {
            canvas.width = document.documentElement.clientWidth- 100;
            canvas.height = document.documentElement.clientHeight- 170;
            canvasInit(ctx);
        }
        /**
        *画笔初始化
        */
        function canvasInit(ctx) {
            ctx.strokeStyle = document.getElementById("LineColor").value;
            ctx.lineWidth = - -document.getElementById("lineWidth").value;
            ctx.fillStyle = "rgb(236, 225, 215)";
            ctx.fillRect(0,0,canvas.width,canvas.height)
        }
        getSvgUrl(document.getElementById("LineColor").value);
        resize();
        /**
         * 画布添加鼠标移动事件
        */
        function handleMouseMove(e) {
            if(start){
                ImageStatus = true;
                start===true?getPoint(e):start;
                ctx.lineTo(start.x + e.movementX, start.y + e.movementY);
                ctx.stroke();
                start = getPoint(e) 
            }
        }
        function handleTouchMove(e){
            if(start){
                let touch = e.touches[0];
                ImageStatus = true;
                ctx.lineTo(touch.clientX-canvas.offsetLeft,touch.clientY-canvas.offsetTop);
                ctx.stroke();
                e.preventDefault();
            }
        }
        canvas.addEventListener("mousemove", handleMouseMove);
        canvas.addEventListener("touchmove", handleTouchMove);
        /**
         * 画布添加鼠标按下事件
        */
        function handleMouseDown(e) {
            start = true;
            ctx.beginPath();
        };
        document.addEventListener("mousedown", handleMouseDown);
        document.addEventListener("touchstart", handleMouseDown);
        /**
         * 画布添加鼠标抬起事件
        */
        function handleMouseUp(e) { start = null; }
        document.addEventListener("mouseup", handleMouseUp);
        document.addEventListener("touchend", handleMouseUp);
        /**
         * 保存画布按钮事件
        */
        document.getElementById("Imagesave").addEventListener("click", () => {
            if (!ImageStatus) {
                alert("图片已经下载过或当前图片为空")
            } else {
                saveImage();
                ImageStatus = false;
            }
        });
        window.addEventListener("resize", resize)
    </script>
</body>

</html>